import React from 'react'
import {Trash2, Link2, Send} from 'lucide-react'
import IconButton from '@/components/common/IconButton'

export default function ArticlesItem({value, onEdit, onCopy, onDelete, onSend}) {
  return (
    <div className='grid grid-cols-4 gap-4 px-4 py-1 border-b border-gray-200 items-center hover:bg-gray-50 cursor-pointer' onClick={() => onEdit(value?.id)}>
      <div className='text-sm overflow-hidden overflow-ellipsis whitespace-nowrap'>{value?.title}</div>
      <div className='text-xs'>{value?.status === 0 ? (<div className='flex gap-1 items-center'><span className='bg-green-600 w-2 h-2 block rounded-full'></span><span>已启用</span></div>) : (<div className='flex gap-1 items-center'><span className='bg-red-600 w-2 h-2 block rounded-full'></span><span>已禁用</span></div>)}</div>
      <div className='text-sm'>{value?.created_at && new Date(value?.created_at).toLocaleString()}</div>
      <div className='text-sm pr-2 flex justify-end gap-2'>
        <IconButton onClick={(e) => onSend(e, value?.slug, value?.status)} className={`${value?.status === 0 ? 'bg-blue-500' : 'bg-gray-300'}`}><Send color="#ffffff"/></IconButton>
        <IconButton onClick={(e) => onCopy(e, value?.slug)}><Link2 color="#ffffff"/></IconButton>
        <IconButton onClick={(e) => onDelete(e, value?.id)} className={'bg-red-500'}><Trash2 color="#ffffff" /></IconButton>
      </div>
    </div>
  )
}
